<template>
  <el-form label-width="100px">
    <el-form-item label="名称">
      <el-input v-model="regionList.name" />
    </el-form-item>
    <el-form-item>
      <el-button @click="show()">搜索</el-button>
    </el-form-item>
  </el-form>
  <!--  违规详情-->
  <el-dialog v-model="dialogVisible3" title="详情" width="50%" :before-close="handleClose">
    <el-form label-width="100px">
      <el-form-item label="认证状态">
        <el-button v-if="row.weiStatus == 0">未违规</el-button>
        <el-button v-if="row.weiStatus == 1">已违规</el-button>
      </el-form-item>
      <el-form-item label="违规内容" v-if="row.weiStatus == 1">{{ row.weiMsg }}</el-form-item>
    </el-form>
  </el-dialog>
  <!--  认证详情-->
  <el-dialog v-model="dialogVisible2" title="详情" width="50%" :before-close="handleClose">
    <el-form label-width="100px">
      <el-form-item label="机构编号">{{ row.realname }}</el-form-item>
      <el-form-item label="机构名称">{{ row.idCardNo }}</el-form-item>
      <el-form-item label="证件">
        <img :src="row.image" />
      </el-form-item>
      <el-form-item label="认证状态">
        <el-button v-if="row.statusId == 0">未认证</el-button>
        <el-button v-if="row.statusId == 1">已认证</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!--  服务人详情-->
  <el-dialog v-model="dialogVisible1" title="详情" width="50%" :before-close="handleClose">
    <el-table :data="row1" style="width: 100%">
      <el-table-column prop="name" label="人员" />
      <el-table-column prop="phone" label="手机号" />
    </el-table>
  </el-dialog>
  <!--  详情菜单-->
  <el-dialog v-model="dialogVisible" title="详情" width="50%" :before-close="handleClose">
    <el-form label-width="100px">
      <el-form-item label="机构编号">{{ row.institutionId }}</el-form-item>
      <el-form-item label="机构名称">{{ row.name }}</el-form-item>
      <el-form-item label="机构电话">{{ row.phone }}</el-form-item>
      <el-form-item label="法人身份证">{{ row.idCardNo }}</el-form-item>
      <el-form-item label="机构图片">
        <img :src="row.certificationImgs" />
      </el-form-item>
      <el-form-item label="机构状态">
        <span v-if="row.status == 0">冻结</span>
        <span v-if="row.status == 1">解冻</span>
      </el-form-item>
    </el-form>
  </el-dialog>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="institutionId" label="机构编号" />
      <el-table-column prop="name" label="机构名称" />
      <el-table-column prop="phone" label="机构电话" />
      <el-table-column prop="idCardNo" label="法人身份证" />
      <el-table-column prop="activeStatus" label="机构图片">
        <template #default="scope">
          <img :src="scope.row.certificationImgs" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="500" v-slot="scope">
        <el-button text="primary" type="primary" @click="dong(scope.row)">
          <span v-if="scope.row.status == 0" style="color: #8e1519">冻结</span>
          <span v-if="scope.row.status == 1" style="color: #00db00">解冻</span>
        </el-button>
        <el-button text="primary" type="primary" @click="ji(scope.row.institutionId)">基本信息</el-button>
        <el-button text="primary" type="primary" @click="fu(scope.row.institutionId)">服务人员</el-button>
        <el-button text="primary" type="primary" @click="ren()">认证详情</el-button>
        <el-button text="primary" type="primary" @click="wei()">违规详情</el-button>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="regionList.pageNum"
      v-model:page-size="regionList.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { getFId, getId, getInstitutionList, getInstitutionUpdate } from '@/api/institution/index';
  import { ElMessage } from 'element-plus';
  const dialogVisible = ref(false);
  const dialogVisible3 = ref(false);
  const total = ref(0);
  const regionList = ref({
    pageNum: 1,
    pageSize: 5,
  });
  const handleSizeChange = (val) => {
    regionList.value.pageSize = val;
    show();
  };
  const handleCurrentChange = (val) => {
    regionList.value.pageNume = val;
    show();
  };

  const tableData = ref([]);
  const dialogVisible2 = ref(false);
  const dialogVisible1 = ref(false);
  function fu(institutionId) {
    dialogVisible1.value = true;
    getFId(institutionId).then((res) => {
      console.log(res.data.data);
      row1.value = res.data.data;
    });
  }
  function show() {
    getInstitutionList(regionList.value).then((res) => {
      console.log(res.data);
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    });
  }
  show();
  function dong(row) {
    getInstitutionUpdate(row).then((res) => {
      ElMessage.success(res.data.msg);
      show();
    });
  }
  function ji(institutionId) {
    console.log(institutionId);
    if (institutionId) {
      dialogVisible.value = true;
      getId(institutionId).then((res) => {
        row.value = res.data.data;
        // console.log(row.value.institutionId);
      });
    } else {
      console.error('institutionId is undefined');
    }
  }
  const row = ref({});
  const row1 = ref();
  function wei() {
    dialogVisible3.value = true;
  }
  function ren() {
    dialogVisible2.value = true;
  }
</script>
